<template>
	<view class="agreeList">
		<view class="search flex alignCenter">
			<input type="text" class="font14" placeholder="输入昵称" v-model.trim="nickname" placeholder-class="font14 color666" maxlength="10" @confirm="searchClick">
			<text class="font14 bold" @click="searchClick">搜索</text>
		</view>
		<view class="">
			<view class="flex alignCenter justConBetween one" v-for="(item,index) in member" :key="index">
				<view class="flex alignCenter" @click="toHomePage">
					<image class="avatar" :src="item.createUserAvatar || 'https://image.alhelp.net/uploads/20231104/4d491857ac50d21ebbcb25ff5bc254f8.png'" mode="widthFix"></image>
					<view class="font14 bold">{{item.createUserName || '匿名用户'}}</view>
				</view>
				<view class="focusStyle" @click.stop="agreeClick(item)">审核</view>
			</view>
			<uni-nodata v-if="member.length==0" :iconStyle="{'margin':'100rpx 0 0'}"></uni-nodata>
		</view>
		<!-- 成功提示 -->
		<uni-mdshowmodule v-if="showTip" :type="`joinFail`" @commonLayerOper="commonLayerOper"></uni-mdshowmodule>
	</view>
</template>

<script>
	import { groupMember,agreeMember } from "@/api/send.js"
	export default {
		data() {
			return {
				nickname:'',
				member:[],
				page:1,
				pageSize:20,
				pageTotal:0,
				groupId:'',
				showTip:false,
				chooseUser:''
			};
		},
		onLoad(option) {
			this.groupId=option.id?option.id:''
			this.getList()
		},
		methods:{
			initPage(){
				this.page=1;
				this.member=[]
			},
			// 获取审核列表
			getList(){
				let param={
					page:this.page,
					size:this.pageSize,
					teamId:this.groupId,
					userState:0,
					createUserName:this.nickname
				}
				groupMember(param).then((res)=>{
					if(res.code==100000){
						res.data.rows.forEach((item)=>{
							item.choose=false
						})
						this.member=this.member.concat(res.data.rows)
						this.pageTotal=Math.ceil(res.data.total/this.pageSize)
					}
				})
			},
			// 搜索
			searchClick(){
				this.initPage()
				this.getList()
			},
			// 去首页
			toHomePage(){
				uni.navigateTo({
					url:'/pages/mine/homePage/homePage'
				})
			},
			// 审核
			agreeClick(item){
				this.chooseUser=item
				uni.showModal({
					title: '提示',
					content: '是否允许该用户加入小组',
					confirmText:'允许',
					cancelText:'拒绝',
					success:(res)=> {
						if (res.confirm) {
							this.agreeApi(1)
						} else if (res.cancel) {
							console.log('用户点击拒绝',res);
							this.showTip=true
						}
					}
				});
			},
			// 拒绝
			commonLayerOper(type,reason){
				console.log('type',type)
				if(type=='cancel'){
					this.showTip=false
				}else{
					if(!reason){
						uni.showToast({
							title:'请输入拒绝理由',
							icon:'none'
						})
						return
					}
					this.agreeApi(2,reason)
				}
			},
			agreeApi(state,reason){
				let param={
					teamId:this.groupId,
					createUserId:this.chooseUser.createUserId,
					userState:state,
				}
				if(state==2){
					param.refuseReason=reason
				}
				console.log('aaa',param)
				agreeMember(param).then((res)=>{
					if(res.code==100000){
						this.showTip=false
						this.initPage()
						this.getList()
					}
				})
			}
		},
		onPullDownRefresh() {
			this.initPage()
			this.getList()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		},
		onReachBottom() {
			if(this.page<this.pageTotal){
				++this.page
				this.getList()
			}else{
				uni.showToast({
					title:'我也是有底线的',
					icon:'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "@/static/public.scss";
.agreeList{
	padding: 30rpx 30rpx 120rpx;
	box-sizing: border-box;
}
.search{
	margin: 0 0 30rpx;
	input{
		border:1px solid $bordercolor;
		border-radius: 30rpx;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		flex:1;
		margin:0 20rpx 0 0;
	}
}
.one{
	margin:0 0 30rpx;
	.avatar{
		width: 100rpx;
		height:100rpx;
		display: block;
		border-radius: 50%;
		margin-right:20rpx;
	}
}
</style>
